<!--  -->
<template>
  <div class="home-container">
    <div class="herder" @mouseover="isShowSelect = true" @mouseleave="isShowSelect = false">
      <div class="title">{{ currentMarketName }}快检结果全城通系统</div>
      <!-- <img src="../../assets/img/title.png" alt="" /> -->
      <div class="time">{{ formattedDate }}</div>
      <el-select v-show="isShowSelect" v-model="currentMarketId" style="position: absolute; right: 30px">
        <el-option v-for="item in marketList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>
    <div class="content">
      <div class="item-box">
        <div class="item item1">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" /> 本日检测数据
          </div>
          <div class="item-content">
            <BannerView ref="bannerViewRef" :config="config1"></BannerView>
          </div>
        </div>
        <div class="item item2">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" /> 检测项目分析
          </div>
          <div class="item-content">
            <echartX ref="echartXRef"></echartX>
          </div>
        </div>
        <div class="item item3">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" />
            检测商品类别分析
          </div>
          <div class="item-content">
            <ThreeChart ref="threeChartRef"></ThreeChart>
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="item item1">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" /> 溯源统计
          </div>
          <div class="item-content">
            <FourChart ref="fourChartRef" :config="config1"></FourChart>
          </div>
        </div>
        <div class="item item2">
          <div class="item-top"></div>
          <div class="title" @click="handleBack">
            <img src="../../assets/img/item-title.png" alt="" />
            食用农产品安全指数
          </div>
          <div class="item-content">
            <FiveChart ref="fiveChartRef"></FiveChart>
          </div>
        </div>
        <div class="item item3">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" />
            疑似阳性风险预警
          </div>
          <div class="item-content">
            <SixChart ref="sixChartRef"></SixChart>
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="item item1">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" /> 本日交易数据
          </div>
          <div class="item-content">
            <BannerView1 ref="bannerView1Ref" :config="config1"></BannerView1>
          </div>
        </div>
        <div class="item item2">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" /> 交易商品类别
          </div>
          <div class="item-content">
            <Category ref="categoryRef"></Category>
          </div>
        </div>
        <div class="item item3">
          <div class="item-top"></div>
          <div class="title">
            <img src="../../assets/img/item-title.png" alt="" />
            食用农产品产地(来源)分析
          </div>
          <div class="item-content">
            <Pie ref="pieRef"></Pie>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <span class="f-l"></span>
      <span class="f-c">食源安技术服务泰州有限公司</span>
      <span class="f-r"></span>
    </div>
  </div>
</template>

<script>
import { getLunar } from "chinese-lunar-calendar";
import BannerView from "../../component/bannerView.vue";
import Category from "../echarts/category.vue";
import echartX from "../echarts/echartX.vue";
import Pie from "../echarts/Pie.vue";
import ThreeChart from "../echarts/threeChart.vue";
import FourChart from "../echarts/fourChart.vue";
import SixChart from "../echarts/sixChart.vue";
import FiveChart from "../echarts/fiveChart.vue";
import BannerView1 from "../../component/bannerView1.vue";
import { getQJLbByMarketATy } from "../../util/home";

function getToken() {
  return localStorage.getItem("token");
}
function waitingForToken() {
  return new Promise((resolve) => {
    let timer = setInterval(() => {
      let token = getToken();
      if (token) {
        clearInterval(timer);
        resolve(token);
      }
    }, 1000);
  });
}

export default {
  name: "Home",
  components: {
    BannerView,
    echartX,
    Category,
    Pie,
    ThreeChart,
    FourChart,
    SixChart,
    FiveChart,
    BannerView1,
  },
  data() {
    return {
      formattedDate: "",
      header: ["列1", "列2", "列3", "列4", "列5"],
      data: [
        [
          "行1列1",
          "行1列2",
          "行1列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行2列1",
          "行2列2",
          "行2列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行3列1",
          "行3列2",
          "行3列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行4列1",
          "行4列2",
          "行4列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行5列1",
          "行5列2",
          "行5列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行6列1",
          "行6列2",
          "行6列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行7列1",
          "行7列2",
          "行7列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行8列1",
          "行8列2",
          "行8列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        [
          "行9列1",
          "行9列2",
          "行9列3",
          '<span style="color:#1AED83;">行3列3</span>',
          "行1列3",
        ],
        ["行10列1", "行10列2", "行10列3", "行1列3", "行1列3"],
      ],
      config1: {},
      marketList: [],
      currentMarketId: "",
      currentMarketName: "",
      isShowSelect: false,
    };
  },
  provide: function () {
    return {
      currentMarketId: () => this.currentMarketId,
    };
  },
  created() {
    this.config1 = {
      header: this.header,
      headerBGC: "none",
      oddRowBGC: "#17325B",
      evenRowBGC: "#0C1B48",
      data: this.data,
      align: ["center", "center", "center", "center", "center"],
    };
  },
  mounted() {
    this.updateTime();
    this.getInit();
    setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const oldYear = getLunar(
        now.getFullYear(),
        now.getMonth() + 1,
        now.getDate()
      );
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");
      this.formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} 农历${oldYear.dateStr}`;
    },
    getInit() {
      getQJLbByMarketATy().then((res) => {
        console.log(res, 222);
        if (res.data?.data?.length > 0) {
          this.marketList = res.data.data.map((item) => {
            return { id: item.id, name: item.name };
          });
          res.data.data.forEach(item => {
            if (item.id == localStorage.getItem('market')) {
              this.currentMarketId = item.id;
              this.currentMarketName = item.name;
            }
          })
        } else {
          localStorage.clear()
          this.$router.push('/')
        }
      });
    },
    //返回
    handleBack() {
      this.$confirm('是否返回重新输入标识码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear()
        this.$router.push('/')
      }).catch(() => {
      });
    }
  },
  watch: {
    currentMarketId: function (val) {
      let obj = this.marketList.find((item) => item.id == val);
      this.currentMarketName = obj.name;
      this.$refs["bannerViewRef"].getCityData();
      this.$refs["bannerView1Ref"].getCityData();
      this.$refs["echartXRef"].getInit();
      this.$refs["threeChartRef"].getInit();
      this.$refs["threeChartRef"].getInit2();
      this.$refs["fourChartRef"].getInit();
      this.$refs["fiveChartRef"].getInit();
      this.$refs["sixChartRef"].getInit();
      this.$refs["categoryRef"].getInit();
      this.$refs["pieRef"].refresh();
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #091434;

  .herder {
    width: 100%;
    height: 50px;
    background: url("../../assets/img/组\ 6981@2x.png");
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    // background-repeat: no-repeat;
    background-size: 100%, 80%;
    background-attachment: fixed;

    .title {
      font-size: 2.1vw;
      font-weight: 600;
      color: #4686db;
      margin-bottom: 15px;
    }

    .time {
      font-size: 12px;
      right: 30px;
      bottom: 0;
      position: absolute;
      color: #fff;
    }

    img {
      width: 715.2px;
      height: 35.68px;
    }
  }

  .content {
    padding: 10px 10px 0 10px;
    height: calc(100% - 100px);
    display: flex;
    justify-content: center;

    .item-box {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;

      .item {
        // height: 33.33%;
        border: 1px solid #2b5cf6;
        position: relative;
        box-sizing: content-box;
        margin: 8px;

        .item-top {
          width: 100%;
          height: 25px;
          background: linear-gradient(360deg,
              #007fff 0%,
              rgba(43, 92, 246, 0) 100%);
          opacity: 0.5;
        }

        .title {
          color: #fff;
          position: absolute;
          top: 4px;
          left: 15px;
          font-size: 12px;
        }

        .item-content {
          padding: 5px 10px;
          width: calc(100% - 20px);
          height: calc(100% - 35px);
          background: #0c1b48;

          .header-item {
            color: #007fff;
          }
        }
      }
    }

    .item1 {
      height: 30.63%;
    }

    .item2 {
      height: 32.07%;
    }

    .item3 {
      height: 30.22%;
    }
  }

  .foot {
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #c3c3c3;
    padding: 0 20px;
    box-sizing: content-box;

    .f-l {
      flex: 1;
      height: 1px;
      border-bottom: 1px solid #666c7c;
    }

    .f-c {
      display: flex;
      margin: 0 22px;
    }

    .f-r {
      flex: 1;
      height: 1px;
      border-bottom: 1px solid #666c7c;
    }
  }
}
</style>
<style>
.home-container .content .item-box .item .dv-scroll-board .header .header-item {
  color: #0fffff;
  font-size: 14px;
}

.dv-scroll-board {
  width: 100% !important;
  height: 100% !important;
}

.el-divider__text {
  background-color: #000;
  color: #fff;
}
</style>
